<template>
  <div id="circuitRelation">
    <el-container>
      <el-main>
        <el-row>
          <el-form :inline="true" :model="form" ref="form" :rules="rules" class="demo-form-inline">
            <el-row class="floatLeft">
              <el-form-item label="摊分账期" prop="cycle_id">
                <el-input placeholder="例：202002" v-model="form.cycle_id"></el-input>
              </el-form-item>
              <el-form-item label="网格名称" prop="trellisName" label-width="110px">
                <el-select @change="getStaffsFirst" v-model="form.trellisCode" filterable placeholder="请选择">
                  <el-option
                    v-for="item in depts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="客户经理" prop="accountManager">
                <el-select v-model="form.yzStaffId" filterable placeholder="请选择">
                  <el-option
                    v-for="item in staffs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row class="floatLeft">
              <el-form-item label="业务号码">
                <el-input placeholder="业务号码" v-model="form.serialNumber"></el-input>
              </el-form-item>
              <el-button type="primary" size="small" @click="searchFn" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetSearchForm" size="small">重置</el-button>
            </el-row>
          </el-form>
        </el-row>
        <el-row class="floatLeft">
          <!--          <el-button type="primary" size="small" plain>新增</el-button>-->
          <!--          <el-button type="success" size="small"  plain>修改</el-button>-->
          <!--          <el-button type="danger" size="small"  plain>删除</el-button>-->
          <el-button type="primary" size="small" @click="dialogFormVisible = true">上传<i
            class="el-icon-upload el-icon--right"></i></el-button>
          <el-button type="primary" size="small" @click="exportData">导出数据<i class="el-icon-upload el-icon--right"></i>
          </el-button>
          <el-button type="primary" size="small" @click="downloadTemplate">下载模板<i
            class="el-icon-upload el-icon--right"></i></el-button>
        </el-row>
        <el-table
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          size="mini"
          :data="tableData"
          highlight-current-row
          border
          style="width: 100%"
          height="800">
          <el-table-column label="序号"
                           type="index"
                           width="50"></el-table-column>
          <el-table-column prop="client" label="客户名称"></el-table-column>
          <el-table-column prop="trellisCode" label="网格编码"></el-table-column>
          <el-table-column prop="trellisName" label="行业网格"></el-table-column>
          <el-table-column prop="yzStaffId" label="客户经理编码"></el-table-column>
          <el-table-column prop="accountManager" label="客户经理"></el-table-column>
          <el-table-column prop="serialNumber" label="计费号码"></el-table-column>
          <el-table-column prop="a1" label="摊分账期"></el-table-column>
          <el-table-column prop="b1" label="计费账期"></el-table-column>
          <el-table-column prop="h1" label="电路代号"></el-table-column>
          <el-table-column prop="k1" label="一站流水号"></el-table-column>
          <el-table-column prop="fee" label="收入(元)"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total=total
          :hide-on-single-page="false"
          :page-size="10"
          @current-change="currentChange">
        </el-pagination>
        <el-dialog title="上传省级电路模板" :visible.sync="dialogFormVisible">
          <el-upload
            class="upload-demo"
            action
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="uploadImg">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel.xlsx/xls文件</div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
    <router-view/>
  </div>


</template>

<script>
  import '@/assets/supply.css'
  import axios from 'axios'
  import {getUrlParams} from '../../components/utils/getUrlParams'
  import {downloadTemplate, getBaseDataList, getDept, getDeptStaff,downLoadData} from '../../components/utils/getDataFn'
  import global from '../../components/utils/global'

  export default {
    name: 'circuitRelation',
    created () {
      var staffId = getUrlParams('staffId')
      this.staffId = getUrlParams('staffId')
      sessionStorage.setItem('staffId', this.staffId)
      getBaseDataList(1001, this)
      getBaseDataList(2001, this)
      getDept(this)
    },
    methods: {
      exportData () {
        let _this = this
        this.$refs['form'].validate((valid) => {
        debugger
          if (valid) {
            _this.getQueryParams()
            axios({
              methods: 'get',
              url: global.host + '/circuitRelation/download',
              params: {params: JSON.stringify(_this.queryParams)},
              responseType: 'blob'
            }).then(res => {
              downLoadData(res);
            }).catch()
          }
        })
      },
      downloadTemplate () {
           downloadTemplate('省际电路关系维护.xlsx')
      },
      uploadImg (fileObj) {
        let _this = this
        let formData = new FormData()
        formData.set('file', fileObj.file)
        axios.post(global.host + '/circuitRelation/upload', formData, {
          headers: {
            'Content-type': 'multipart/form-data',
            'staffId': this.staffId
          }
        }).then(res => {
          if (res.data.length > 0 && res.data !== '上传成功' && res.data !== '请上次相关文件') {
            _this.dialogTable = true
            _this.dialog.table = res.data
          } else {
            _this.open(res.data)
            _this.searchFn()
          }
        }).catch()
      }, open (message) {
        this.$alert(message, '上传', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      },
      open (message) {
        this.$alert(message, '上传', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      },
      getStaffsFirst () {
        this.form.yzStaffId = ''
        getDeptStaff(this.form.trellisCode, this)
      },
      getStaffs () {
        this.dialog.form.yzStaffId = ''
        getDeptStaff(this.dialog.form.trellisCode, this)
      },
      resetSearchForm () {
        for (let item in this.form) {
          this.form[item] = ''
        }
      },
      handleClick (row) {
        console.log(row)
      },
      searchFn () {
        this.$refs['form'].validate((valid) => {
        debugger
          if (valid) {
            this.startSize = 0
            this.endSize = 11
            this.currentPage = 1
            this.queryAll()
            this.queryAllCount()
          }
        })
      },
      onSubmit () {
        this.queryAll()
        this.queryAllCount()
      },
      queryAll: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host + '/circuitRelation/queryAll',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.tableData = res.data
        })
      },
      queryAllCount: function () {
        let _this = this
        _this.getQueryParams()
        axios({
          methods: 'get',
          url: global.host + '/circuitRelation/queryAllCount',
          params: {params: JSON.stringify(_this.queryParams)}
        }).then(res => {
          console.log(res)
          _this.total = res.data
        })
      },
      currentChange (cpage) {
        let _this = this
        _this.currentPage = cpage
        _this.startSize = cpage * 10 - 10
        _this.endSize = cpage * 10
        this.onSubmit()
      },
      getQueryParams () {
        this.queryParams = {
          startSize: this.startSize,
          endSize: this.endSize,
          contractName: this.form.contractName,
          contractNoGlobal: this.form.contractNoGlobal,
          yzStaffId: this.form.yzStaffId,
          trellisCode: this.form.trellisCode,
          signWay: this.form.signWay,
          staffId: this.staffId,
          serialNumber: this.form.serialNumber,
          cycleId: this.form.cycle_id
        }
      },
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePreview (file) {
        console.log(file)
      },
      handleExceed (files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove (file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },

    }
    ,
    data () {
      return {
        staffs: [],
        depts: [],
        staffId: '',
        tableData: [],
        total: 0,
        currentPage: 1,
        startSize: 0,
        endSize: 11,
        queryParams: {},
        dates: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        fileList: [],
        form: {
          contractName: '',
          contractNoGlobal: '',
          yzStaffId: '',
          accountManager: '',
          trellisCode: '',
          trellisName: '',
          signWay: '',
          serialNumber: '',
          cycle_id: ''
        },
        rules: {
          cycle_id: [{required: true, message: '摊分账期', trigger: 'blur'}],
        }
      }
    }
  }
</script>

<style>
  #circuitRelation {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 20px;
  }

  html, body {
    height: auto;
  }
</style>
